<template>
  <div class="home-official">
    <h1>官方歌单</h1>
    <div class="wrapper" ref="wrapper">
      <ul class="content" ref="content">
        <li v-for="(item, index) in listData" :key="index">
          <div class="cover">
            <van-image :src="item.cover_url_medium" radius="10" />
            <span>{{ item.access_num | numFilter(1) }}万</span>
          </div>
          <span>{{ item.title }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { betterScrollHorizontal } from '@/common/betterScroll.js'
export default {
  data() {
    return {
      pageNo: 1,
      listData: []
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    // 获取推荐歌单数据
    getData() {
      this.$request('get', '/recommend/playlist').then(res => {
        // console.log(res);
        if (res.result == 100) {
          this.listData = res.data.list.slice(0, 10)
        }
        //函数调用
        betterScrollHorizontal(this, this.$refs.content, this.$refs.wrapper, this.listData.length, 10)
      })
    },
  }
}
</script>

<style scoped>
.wrapper {
  width: 100%;
  overflow: hidden;
}

ul.content li {
  width: 10rem;
  display: inline-block;
  vertical-align: top;
  /*垂直对齐方式：顶部对齐*/
}

ul.content li * {
  margin: 0 0.1rem;
}

ul.content li>span {
  font-size: 0.8rem;
  color: red;
}

.cover {
  position: relative;
}

.cover>span {
  position: absolute;
  right: 0;
  bottom: 0.3rem;
  background-color: #a6a0a0;
  color: white;
  border-radius: 1rem;
  width: 5rem;
}
</style>